<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style>
  html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
  }

  .video-container {
    width: 100%;
    height: 100%;
  }

</style>
<body>
<div class="video-container">
  <iframe id="videofram" src="video.html" scrolling="no" frameborder="0" height="100%" width="100%"></iframe>
</div>
<!--<script src="jquery-1.12.4.min.js"></script>-->
<script>
  const ONE_MINITES = 1000 * 10
  const INTERVAL = ONE_MINITES

  var name = getQueryVariable('name')

  let names = name.split(',')

  let timeoutRefence

  //
  function loop() {
    let n = findParams(names)
    let iframe = document.getElementById('videofram')
    iframe.setAttribute('src', `video.html?name=${n}`)
    timeoutRefence = setTimeout(loop, INTERVAL)
  }

  // 取出数组中的第一个返回，并把第一个放到数组的末尾。以便循环
  function findParams(arr) {
    let result = arr[0]
    arr.push(arr.shift())
    return result
  }

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1)
    var vars = query.split('&')
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=')
      if (pair[0] === variable) {
        return pair[1]
      }
    }
    return ''
  }

  // 暂停
  function pause() {
    iframe.contentWindow.pause()
    clearTimeout(timeoutRefence)
  }

  // 播放
  function play() {
    loop()
  }

  window.onload = function() {
    loop()
  }


</script>

</body>
</html>
